.toasts {
  // fixed note
  font-size: $h4-size;
  // mdl
  @include shadow-2dp();

  .title {
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.14);
  }

  // fixed
  .content {
    :first-child {
      margin-top: 0;
    }

    :last-child {
      margin-bottom: 0;
    }
  }

  &.note {
    background-color: lighten($theme-blue, 50%);

    .title {
      background: lighten($theme-blue, 20%);
    }
  }

  &.tip {
    background-color: lighten($theme-green, 50%);

    .title {
      background: lighten($theme-green, 0%);
    }
  }

  &.warning {
    background-color: lighten($theme-orange, 40%);

    .title {
      background: lighten($theme-orange, 20%);
    }
  }

  &.danger {
    background-color: lighten($theme-red, 40%);

    .title {
      background: lighten($theme-red, 20%);
    }
  }
}
